<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高校失物招领平台 - 登录注册</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F6DF5',
                        secondary: '#6C5CE7'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-image: url('https://ai-public.mastergo.com/ai/img_res/6f9d85a323f7982a3beeb13114fb6ef3.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .form-container {
            backdrop-filter: blur(8px);
            background-color: rgba(255, 255, 255, 0.85);
        }
        .input-icon {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col font-sans">
    <header class="bg-white bg-opacity-90 shadow-sm">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <span class="font-['Pacifico'] text-2xl text-primary">logo</span>
                <span class="text-xl font-semibold">高校失物招领平台</span>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-gray-600 hover:text-primary transition">首页</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition">失物招领</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition">寻物启事</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="flex-grow flex items-center justify-center px-4 py-12">
        <div class="form-container rounded-xl shadow-xl p-8 w-full max-w-md">
            <div class="flex justify-center mb-8">
                <div class="flex space-x-1 bg-gray-100 p-1 rounded-full">
                    <button id="login-tab" class="px-6 py-2 rounded-full bg-primary text-white whitespace-nowrap !rounded-button">登录</button>
                    <button id="register-tab" class="px-6 py-2 rounded-full text-gray-600 whitespace-nowrap !rounded-button">注册</button>
                </div>
            </div>

            <div id="login-form" class="space-y-4">
                <h2 class="text-2xl font-bold text-center text-gray-800">欢迎回来</h2>
                <p class="text-center text-gray-500 mb-6">请使用您的学号或手机号登录</p>
                
                <div class="space-y-4">
                    <div>
                        <label for="login-account" class="block text-sm font-medium text-gray-700 mb-1">学号/手机号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-user input-icon text-gray-400"></i>
                            </div>
                            <input type="text" id="login-account" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="请输入学号或手机号">
                        </div>
                    </div>
                    
                    <div>
                        <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock input-icon text-gray-400"></i>
                            </div>
                            <input type="password" id="login-password" class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="请输入密码">
                            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i class="fas fa-eye-slash input-icon text-gray-400 hover:text-gray-600"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                        </div>
                        <a href="#" class="text-sm text-primary hover:underline">忘记密码?</a>
                    </div>
                    
                    <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary whitespace-nowrap !rounded-button">
                        登录
                    </button>
                    
                    <div class="text-center text-sm text-gray-500">
                        还没有账号? <button id="switch-to-register" class="text-primary font-medium hover:underline">立即注册</button>
                    </div>
                </div>
            </div>

            <div id="register-form" class="space-y-4 hidden">
                <h2 class="text-2xl font-bold text-center text-gray-800">创建新账号</h2>
                <p class="text-center text-gray-500 mb-6">加入我们，找回失物更便捷</p>
                
                <div class="space-y-4">
                    <div>
                        <label for="register-student-id" class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-id-card input-icon text-gray-400"></i>
                            </div>
                            <input type="text" id="register-student-id" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="请输入学号">
                        </div>
                        <p class="mt-1 text-xs text-gray-500">请输入您的有效学号</p>
                    </div>
                    
                    <div>
                        <label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-mobile-alt input-icon text-gray-400"></i>
                            </div>
                            <input type="tel" id="register-phone" class="w-full pl-10 pr-24 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="请输入手机号">
                            <button type="button" class="absolute inset-y-0 right-0 px-3 text-sm text-primary hover:text-primary-dark whitespace-nowrap !rounded-button">
                                获取验证码
                            </button>
                        </div>
                    </div>
                    
                    <div>
                        <label for="register-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                        <input type="text" id="register-code" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="请输入验证码">
                    </div>
                    
                    <div>
                        <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">设置密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock input-icon text-gray-400"></i>
                            </div>
                            <input type="password" id="register-password" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="6-20位字母和数字组合">
                        </div>
                        <div class="mt-1 flex space-x-2">
                            <div class="h-1 w-1/4 bg-gray-200 rounded-full"></div>
                            <div class="h-1 w-1/4 bg-gray-200 rounded-full"></div>
                            <div class="h-1 w-1/4 bg-gray-200 rounded-full"></div>
                            <div class="h-1 w-1/4 bg-gray-200 rounded-full"></div>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">密码强度: 弱</p>
                    </div>
                    
                    <div>
                        <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock input-icon text-gray-400"></i>
                            </div>
                            <input type="password" id="register-confirm-password" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="再次输入密码">
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="register-agreement" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        </div>
                        <div class="ml-2 text-sm">
                            <label for="register-agreement" class="text-gray-700">我已阅读并同意</label>
                            <a href="#" class="text-primary hover:underline">《用户服务协议》</a>
                            <span class="text-gray-700">和</span>
                            <a href="#" class="text-primary hover:underline">《隐私政策》</a>
                        </div>
                    </div>
                    
                    <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary whitespace-nowrap !rounded-button">
                        注册
                    </button>
                    
                    <div class="text-center text-sm text-gray-500">
                        已有账号? <button id="switch-to-login" class="text-primary font-medium hover:underline">立即登录</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-white bg-opacity-90 py-6">
        <div class="container mx-auto px-6">
            <div class="flex flex-col items-center">
                <div class="flex space-x-6 mb-4">
                    <a href="#" class="text-gray-600 hover:text-primary transition">关于我们</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition">帮助中心</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition">联系我们</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition">隐私政策</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition">服务条款</a>
                </div>
                <p class="text-sm text-gray-500">© 2023 高校失物招领平台 版权所有</p>
                <p class="text-xs text-gray-400 mt-2">由 计算机学院创新实验室 提供技术支持</p>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            const switchToRegister = document.getElementById('switch-to-register');
            const switchToLogin = document.getElementById('switch-to-login');
            
            function showLogin() {
                loginTab.classList.add('bg-primary', 'text-white');
                loginTab.classList.remove('text-gray-600');
                registerTab.classList.remove('bg-primary', 'text-white');
                registerTab.classList.add('text-gray-600');
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
            }
            
            function showRegister() {
                registerTab.classList.add('bg-primary', 'text-white');
                registerTab.classList.remove('text-gray-600');
                loginTab.classList.remove('bg-primary', 'text-white');
                loginTab.classList.add('text-gray-600');
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
            }
            
            loginTab.addEventListener('click', showLogin);
            registerTab.addEventListener('click', showRegister);
            switchToRegister.addEventListener('click', showRegister);
            switchToLogin.addEventListener('click', showLogin);
            
            const passwordInput = document.getElementById('login-password');
            const togglePassword = passwordInput.nextElementSibling.querySelector('i');
            
            togglePassword.addEventListener('click', function() {
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    togglePassword.classList.replace('fa-eye-slash', 'fa-eye');
                } else {
                    passwordInput.type = 'password';
                    togglePassword.classList.replace('fa-eye', 'fa-eye-slash');
                }
            });
            
            const getCodeBtn = document.querySelector('#register-phone ~ button');
            getCodeBtn.addEventListener('click', function() {
                let countdown = 60;
                const originalText = getCodeBtn.textContent;
                
                getCodeBtn.disabled = true;
                getCodeBtn.textContent = `${countdown}秒后重试`;
                
                const timer = setInterval(() => {
                    countdown--;
                    getCodeBtn.textContent = `${countdown}秒后重试`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        getCodeBtn.disabled = false;
                        getCodeBtn.textContent = originalText;
                    }
                }, 1000);
            });
        });
    </script>
</body>
</html>